<template>
  <div class="wallpaper">
    <div class="cate-list">
      <div class="item" v-for="(item,index) in cate" @click="setCate(item)">
        <el-button size="small" :type="cid === Number(item['id'])?'success':'default'"  plain>{{item['name']}}</el-button>
      </div>
    </div>
    <div class="list" @scroll="handleScroll">
      <div class="item" v-for="(item,index) in list">
        <el-image class="image" :preview-src-list="[item['url_thumb']]" lazy fit="cover" :src="item['url_thumb']">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <span class="tag">{{item['utag']}}</span>
        <el-button size="small" @click="setImg(item['url'])">设置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {SetBackGround,GetCate,GetList}  from "../../wailsjs/go/controller/Wallpaper";
export default {
  name: 'WallpaperView',
  data(){
    return {
      isLoading:false,
      cate:[],
      list:[],
      page:1,
      size:20,
      cid:0,
      total:0,
      maxPage:0
    }
  },
  mounted() {
    this.getCate()
  },
  methods:{
    handleScroll(event){
      const { scrollTop, clientHeight, scrollHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight) {
        // 滚动条到达底部，触发懒加载
        this.loadMore();
      }
    },
    setImg(url){
      if(url === undefined || url === ''){
        return
      }
      SetBackGround(url);
    },
    loadMore(e){
      if(this.page === this.maxPage){
        return
      }
      this.page ++
      this.getList()
    },
    setCate(cate){
      this.cid = Number(cate['id'])
      this.page = 1
      this.size = 20
      this.getList()
    },
    getCate(){
      GetCate().then(res => {
        var json = JSON.parse(res);
        if(json['errno'] === "0"){
          this.cate = json["data"]
          this.cid = Number(this.cate[0]['id'])
          this.getList()
        }
        console.log(json)
      })
    },
    getList(){
      GetList(this.cid,(this.page - 1)*this.size,this.size).then(res => {
        var json = JSON.parse(res);
        if(json['errno'] === "0"){
          if(this.page === 1){
            this.list = json["data"]
          }else{
            this.list.push(...json["data"])
          }
          this.total = Number(json["total"])
          this.maxPage = Math.ceil(this.total/this.size)
        }
        console.log(this.list)
      })
    }
  }
}
</script>

<style lang="scss">
.wallpaper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  .cate-list{
    margin: 10px 0 0 10px;
    flex-shrink: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    .item{
      margin: 0 10px 10px 0;
    }
  }
  .list{
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    padding: 0 0 20px 0;
    .item{
      width: calc((100vw - 200px)/3);
      margin: 0 0 10px 10px;
      display: flex;
      flex-direction: column;
      .tag{
        margin: 5px 0;
        height: 25px;
        line-height: 25px;
        width: 100%;
        white-space:nowrap;
        text-overflow:ellipsis;
        font-size: 14px;
      }
      .image{
        width: 100%;
        height: calc((100vw - 200px)/5);
        .image-slot{
          line-height: 120px;
          text-align: center;
        }
      }
    }
  }
}
</style>
